<template>
  <div id="app">
    <el-container style="height: 100vh;">
      <el-aside width="200px" style="height: 100%;">
        <NavMenu />
      </el-aside>
      <el-container style="height: 100%;">
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from './components/NavMenu.vue';

export default {
  name: 'App',
  components: {
    NavMenu
  }
};
</script>

<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Roboto', sans-serif; /* 使用更现代的字体 */
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.el-aside {
  background-color: #303133;
  color: #fff;
  text-align: left;
  overflow-y: auto; /* 如果内容超出，允许滚动 */
}

.el-main {
  background-color: #f5f7fa;
  color: #333;
  padding: 20px;
  flex: 1; /* 使主内容区域占满剩余空间 */
  overflow-y: auto; /* 如果内容超出，允许滚动 */
}

@media (max-width: 768px) {
  .el-aside {
    width: 100%;
    height: auto;
  }

  .el-main {
    padding: 10px;
  }
}
</style>